<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogFormVisible"
    width="70%"
    @close="close"
  >
    <div class="m-r-45 minw300 m-b-30 bor-1 p-20" style="margin-top: 5px">
      <div>
        <el-radio-group v-model="form.mltype" size="small">
          <el-radio label="0" border>用户权益低于”参数1“强平设定品种</el-radio>

          <el-radio label="1" border>
            风险度大于"参数1"时强行平仓
          </el-radio>

          <el-radio label="2" border disabled>
            当日总亏损高于“参数1”， 直到时间到达 “参数2”前禁止开仓
          </el-radio>

          <el-radio label="3" border disabled>
            当日总盈利高于“参数1”后，若当前盈利小于等于最大盈利减”参数2“时强行平仓，直到时间到达参数3前禁止开仓
          </el-radio>

          <el-radio disabled label="4" border>
            用户权益低于”参数1“强平持仓
          </el-radio>

          <el-radio disabled label="5" border>
            当前权益低于初始权益百分之”参数1“强平持仓
          </el-radio>
          <el-radio disabled label="6" border>
            风险度大于"参数1"时强行设定品种持仓
          </el-radio>
        </el-radio-group>
      </div>
    </div>
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <el-form-item label="名称" prop="mlname" required>
        <el-input v-model.trim="form.mlname"></el-input>

        <el-alert
          title="风险度 = 保证金/权益*100%"
          type="warning"
          class="m-t-15"
          v-if="form.mltype == 5"
        ></el-alert>
        <el-alert
          title="风险度 = 保证金/权益*100%"
          type="warning"
          class="m-t-15"
          v-if="form.mltype == 6"
        ></el-alert>
        <el-alert
          title="总盈亏 = 平仓盈亏 + 浮动盈亏 - 手续费。时间到达的格式为 HH:mm:ss"
          type="warning"
          class="m-t-15"
          v-if="form.mltype == 2"
        ></el-alert>
        <el-alert
          title="总盈亏 = 平仓盈亏 + 浮动盈亏 - 手续费。时间到达的格式为 HH:mm:ss"
          type="warning"
          class="m-t-15"
          v-if="form.mltype == 3"
        ></el-alert>
        <el-alert
          title="用户权限低于设定值"
          type="warning"
          class="m-t-15"
          v-if="form.mltype == 0"
        ></el-alert>

        <el-alert
          title="用户权限低于设定值"
          type="warning"
          class="m-t-15"
          v-if="form.mltype == 1"
        ></el-alert>

        <el-alert
          title="初始权益 = 当日初始资金 + 当日入金 - 当日出金"
          type="warning"
          class="m-t-15"
          v-if="form.mltype == 6"
        ></el-alert>
      </el-form-item>

      <el-form-item label="品种" v-if="form.mltype == 1 || form.mltype == 5">
        <tree
          :nodes="nodes"
          style="
            max-height: 250px;
            overflow-y: auto;
            border: 1px solid #eee;
            padding-left: 10px;
          "
          ref="treeAuth"
          :setting="setting"
          @onCreated="handleCreated"
        />

        <div class="p-t-40">
          <el-button type="primary" class="m-b-30" @click="checkAll">
            全选
          </el-button>
          <el-button type="success" @click="reCheckAll">反选</el-button>
        </div>
      </el-form-item>

      <el-form-item label="参数1" prop="param">
        <el-input v-model.trim="form.param"></el-input>
      </el-form-item>

      <el-form-item label="生效时间">
        <el-time-picker
          is-range
          v-model="form.timerang"
          value-format="HH:mm:ss"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          placeholder="选择时间范围"
        ></el-time-picker>
      </el-form-item>

      <el-form-item
        label="当预警线到达"
        v-if="form.mltype != 0 && form.mltype != 1"
      >
        <div class="view flex-row align-center">
          <div class="w100">
            <el-input v-model.trim="form.mlname" type="number"></el-input>
          </div>
          <div>%</div>

          <div>&nbsp;&nbsp;&nbsp;每&nbsp;&nbsp;&nbsp;</div>

          <div class="w100">
            <el-input v-model.trim="form.mlname" type="number"></el-input>
          </div>

          <div>
            &nbsp;&nbsp;&nbsp;分钟发送风险通知，强平所有持仓数量&nbsp;&nbsp;&nbsp;
          </div>

          <div class="w100">
            <el-input v-model.trim="form.mlname" type="number"></el-input>
          </div>
        </div>
      </el-form-item>

      <el-form-item label="强平前">
        <el-checkbox v-model="form.isopenban" :true-label="1" :false-label="0">
          撤开仓挂单
        </el-checkbox>

        <el-checkbox v-model="form.iscloseban" :true-label="1" :false-label="0">
          撤平仓挂单
        </el-checkbox>
      </el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button @loading="loading" type="primary" @click="save">
        确 定
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
  import { addqp, editqp, contactlist } from '@/api/userManagement'
  import tree from 'vue-giant-tree'
  import dayjs from 'dayjs'
  import { getAuthList } from '@/api/ad'
  export default {
    name: 'UserManagementEdit',
    components: {
      tree,
    },
    data() {
      return {
        loading: false,
        ztreeObj: null,
        setting: {
          check: {
            enable: true, //显示复选框
            chkStyle: 'checkbox',
          },
          data: {
            simpleData: {
              enable: true,
              pIdKey: 'pid',
            },
          },
          view: {
            showIcon: true,
            dblClickExpand: true,
            selectedMulti: true, //可以多选
            showLine: true,
          },
          callback: {
            onCheck: function () {},
          },
        },
        form: {
          mltype: '0',
          iscloseban: 0,
          isopenban: 0,
          startt: '',
          endt: '',
          param: '',
          timerang: [],
          mlname: '',
        },
        rules: {
          ecname: [{ required: true, trigger: 'blur', message: '请输入名称' }],
        },
        title: '',
        nodes: [],
        contactList: [],
        dialogFormVisible: false,
      }
    },
    created() {
      this.getConList()
    },
    methods: {
      reCheckAll() {
        this.nodes = this.nodes.map((item) => {
          item.checked = false
          return item
        })
      },
      checkAll() {
        this.nodes = this.nodes.map((item) => {
          item.checked = true
          return item
        })
      },
      getConList() {
        contactlist({})
          .then((res) => {
            this.contactList = res.data
            this.nodes = res.data.map((item, index) => {
              let datac = {}
              if (index == 0) {
                datac.pid = 0
                datac.open = true
              }
              datac.id = item.contract
              datac.name = `${item.exchangename}-${item.codename}-${item.contract}`
              return datac
            })
          })
          .catch((ret) => {
            this.$message(ret.msg)
          })
      },
      showEdit(row) {
        if (!row.id) {
          this.title = '添加'
        } else {
          row.olid = row.id

          if (row.olexs) {
            this.nodes.map((item) => {
              if (row.olexs) {
                if (row.olexs.split(',').includes(item.id)) {
                  item.checked = true
                }
              }
              return item
            })
          }

          this.title = '编辑'
        }
        if (row.startt && row.endt) {
          row.timerang = [row.startt, row.endt]
        } else {
          row.timerang = [
            dayjs().format('HH:mm:ss'),
            dayjs().format('HH:mm:ss'),
          ]
        }
        this.form = Object.assign(this.form, row)
        this.form.mltype = String(this.form.mltype)
        this.dialogFormVisible = true
      },
      close() {
        this.$refs['form'].resetFields()
        this.form = this.$options.data().form
        this.dialogFormVisible = false
      },
      handleCreated: function (ztreeObj) {
        this.ztreeObj = ztreeObj
        if (ztreeObj.getNodes()[0]) {
          ztreeObj.expandNode(ztreeObj.getNodes()[0], true)
          this.ztreeObj.selectNode(this.ztreeObj.getNodes()[0], true)
        }
      },
      save() {
        this.$refs['form'].validate(async (valid) => {
          if (valid) {
            this.loading = true
            let form = { ...this.form }
            if (form.mltype == 1) {
              form.olexs = this.ztreeObj
                .getCheckedNodes(true)
                .map((item) => {
                  return item.id
                })
                .join(',')
            }

            if (form.timerang && form.timerang.length > 0) {
              form.startt = form.timerang[0]
              form.endt = this.form.timerang[1]
            }
            delete form.timerang
            if (form.olid) {
              const res = await editqp(form)
              this.$baseMessage('操作成功!', 'success')
              this.loading = false
              this.close()
              this.$emit('fetch-data')
            } else {
              const res = await addqp(form)
              this.$baseMessage('操作成功!', 'success')
              this.loading = false
              this.close()
              this.$emit('fetch-data')
            }
          } else {
            return false
          }
        })
      },
    },
  }
</script>
<style lang="scss" scoped>
  .minw300 {
    min-width: 300px;
  }
  .bor-1 {
    border: 1px solid #dcdfe6;
  }
  ::v-deep .el-radio.is-bordered {
    margin-left: 0 !important;
    margin-bottom: 10px;
  }
</style>
